<template>
  <div class="div-pop" v-if="isSetSkuProp">
    <div class="width-per-90" catchtap>
      <div class="panel">
        <div class="close-btn align-r pad-10" @click="isSetSkuProp=false">
          <img v-if="fileSpace" mode="widthFix" class="width-13 height-13" :src="fileSpace + '/images/close.png'"/>
        </div>
        <div class="skuProp pad-10">
          <div class="flex v-align-c border-b pad-b-10">
            <div class="pad-r-10">规格名</div>
            <input v-model="skuProp.skuPropName" placeholder="请输入规格名" cursor-spacing="50"/>
            <div class="pad-l-10" v-if="!isAddProp" @click="delSkuProp">
              <icon class="iconfont icon-iconfontshanchu2 font-20 font-yellow font-w"></icon>
            </div>
          </div>

          <div v-for="(item, index) in skuProp.skuPropValueList" :key="index" class="flex v-align-c pad-t-10">
            <div class="pad-r-10 font-gray">规格值</div>
            <input v-model="item.skuPropValue" placeholder="请输入规格值" cursor-spacing="50"/>
            <div class="pad-l-10" v-if="skuProp.skuPropValueList.length>1" @click="delSkuPropValue(index)">
              <img v-if="fileSpace" mode="widthFix" class="width-20 height-20 mar-r-5"
                   :src="fileSpace + '/images/2-6-guanbi.png'"/>
            </div>
          </div>

          <div class="pad-10 align-c mar-t-10" @click="addSkuPropValue">
            <div class="flex v-align-c">
              <img v-if="fileSpace" mode="widthFix" class="width-20 height-20 mar-r-5"
                   :src="fileSpace + '/images/2-6-xinzheng.png'"/>
              添加规格值
            </div>
          </div>

          <div class="pad-10">
            <button class="mini-btn" @click="saveSkuProp">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isSetSkuProp: false,
        isComponents: true,
        skuProp: {
          skuPropName: '',
          skuPropValueList: [
            {
              skuPropValue: ''
            }
          ]
        },
        skuPropIndex: null,
        isAddProp: true
      }
    },
    methods: {
      show(skuProp, index) {
        // 初始化data
        Object.assign(this.$data, this.$options.data())
        if (skuProp) {
          this.skuProp = Object.assign(this.skuProp, this.$utils.deepClone(skuProp))
          this.isAddProp = false
        }
        this.skuPropIndex = index
        this.isSetSkuProp = true
      },
      addSkuPropValue() {
        let skuPropValueList = this.skuProp.skuPropValueList
        skuPropValueList.push({
          skuPropValue: ''
        })
        // 需要清除值才能双向绑定
        this.skuProp.skuPropValueList = []
        this.skuProp.skuPropValueList = skuPropValueList
      },
      delSkuPropValue(index) {
        let skuPropValueList = this.skuProp.skuPropValueList
        skuPropValueList.splice(index, 1)
        // 需要清除值才能双向绑定
        this.skuProp.skuPropValueList = []
        this.skuProp.skuPropValueList = skuPropValueList
      },
      saveSkuProp() {
        let isDone = true
        if (!this.skuProp.skuPropName) return this.$utils.showToast({ title: '请输入规格名' })
        this.skuProp.skuPropValueList.forEach((item) => {
          item.skuPropName = this.skuProp.skuPropName
          item.skuPropId = this.skuProp.skuPropId
          if (!item.skuPropValue) {
            isDone = false
            return this.$utils.showToast({ title: '请输入规格值' })
          }
        })
        if (isDone) {
          this.$emit('saveSkuProp', this.$utils.deepClone(this.skuProp), this.skuPropIndex)
          this.isSetSkuProp = false
        }
      },
      delSkuProp() {
        const that = this
        this.$pt.showModal({
          content: '是否确定删除该规格？',
          success(res) {
            if (res.confirm) {
              that.$emit('delSkuProp', that.skuPropIndex)
              that.isSetSkuProp = false
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
  .skuProp {
    max-height: 400px;
    overflow-y: scroll;
  }

  .skuProp input {
    border: 0.5px solid #d9d9d9;
    width: 180px;
    padding-left: 5px;
  }

  .close-btn {
    padding-bottom: 20px;
  }
</style>
